<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建预约</title>

</head>
<body>
<form action="/orders/addOrder" method="post" id="myForm">
<input type="hidden" name="proId" value="">
    <div align="center">
        <h1>创建预约信息</h1>
    </div>
    <div>
        <h3>预约基本信息</h3>
        <p>
            机构名称：
            <select name="insName">
                <#list allOrderIns as a>
                    <option>${a.insName}</option>
                </#list>
            </select>
        </p>
        <p>
            预约联系人:<input type="text" name="userName">
        </p>
        <div>
               <label>
                 我的头像：
                <label><img src="" id="img"></label>
                <input type="hidden" id="hiddenPic" value="" name="pic">
               </label>
            <p>
                头像：<input type="file" name="picture" onchange="preview(this)" id="pic"><span></span>
            </p>
            <button type="button" onclick="uploadPic()" id="upBtn">上传图片</button>
            </p>
        </div>
        <p>
            预约时间:<input type="date" name="orderDate">
        </p>
        <p>
            预约人手机:<input type="text" name="userPhone">
        </p>
        <p>
            预约目的:<textarea name="orderAim"></textarea>
        </p>
        <p>
            预约结果:<textarea name="orderResult"></textarea>
        </p>
        <p>
            预约状态:
            <select name="orderState">
                <option selected>--请选择--</option>
                <#list allStates as sta>
                    <option value="${sta.orderId}">${sta.orderName}</option>
                </#list>
            </select>
        </p>
        <p>
            操作人:<input type="text" name="serverUser">
        </p>
        <p>
            预约提醒:
            <input type="radio" name="1">是
            <input type="radio"  name="1">否
        </p>
        <button type="button" onclick="onsub()">确定</button>
        <button type="button" onclick="location.href='/orders/findAll'">取消</button>
</form>

</div>
</body>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
    function onsub() {
        var data=$("#myForm").serialize();
        $.ajax({
            url:"/orders/addOrder",
            data:"orderss="+data,
            type:"post",
            dataType: "json",
            success:function f(result) {
                <#--        添加成功        -->
               if (result.code==0){
                   alert(result.msg);
                   location.href='/orders/findAll';
               }else {
                   alert("添加失败！！")
                   location.href='/orders/findAll';
               }

            }
        });
    }
//    动态回显图片
    function preview(file) {
        if(file.files && file.files[0]){
            reader=new FileReader();
            reader.onload=function (evt) {
                //在图片的src属性赋值，添加图片流的信息
                $("#img").attr("src",evt.target.result);
            }
            reader.readAsDataURL(file.files[0]);
        }
    }
//    上传图片
    function uploadPic() {
    //    创建FormData对象
        var formData=new FormData();
    //    向formData中封装文件上传项
        formData.append("file",$("#pic")[0].files[0]);
    //    发送ajax请求
        $.ajax({
           url:"/upload/pic",
           data:formData,
           type:"post",
           dataType:"json",
           success:function (rs) {
               if(rs.code==100){
                   $("#img").attr("src",rs.data);
                   $("#hiddenPic").val(rs.data);
                   $("#pic").next().html(rs.msg).css("color","green");
               }
               else {
                   alert("服务器爆炸了!!");
                   $("#pic").next().html("上传失败!!!").css("color","red");
               }
           } ,
            erorr:function () {
               alert("服务器爆炸了!!")
            },
            contentType:false,
            processData:false
        });
    }

</script>
</html>